<template>
  <section>
    <cube-form
      ref="form"
      :model="form"
      :schema="schema"
      :immediate-validate="false"
      :options="options"
      @validate="validateHandler"
      @submit="submitHandler"
    ></cube-form>
    <form-btn @onInput="input" @onSubmit="submit"></form-btn>
  </section>
</template>

<script>
import FormBtn from "./FormBtn";

import { show } from "utils/Base";
import { Dialog } from "cube-ui";

import { config } from "assets/js/data";

import { sendSmsCode } from "api/UtilsApi";
import { login } from "api/UsersApi";

import {mapMutations} from 'vuex'

export default {
  name: "LoginForTel",
  components: {
    FormBtn
  },
  data() {
    return {
      validity: {},
      valid: undefined,
      options: {
        scrollToInvalidField: true,
        layout: "classic"
      },
      form: {
        tel: "",
        code: "",
        serviceChecked: false,
        type: "tel"
      },
      schema: {
        groups: [
          {
            fields: [
              {
                type: "input",
                modelKey: "tel",
                label: "手机号",
                props: {
                  placeholder: "请输入手机号",
                  clearable: true
                },
                rules: {
                  required: true,
                  type: "tel"
                },
                messages: {
                  required: "手机号不能为空",
                  tel: "请输入正确格式的手机号"
                },
                events: {
                  blur(e) {
                    const tel = e.target.value;
                    Dialog.$create({
                      type: "confirm",
                      content: "确定要给" + tel + "发送验证码吗???",
                      title: "提示框",
                      confirmBtn: {
                        text: "发送",
                        active: true,
                        disabled: false,
                        href: "javascript:;"
                      },
                      cancelBtn: {
                        text: "取消发送",
                        active: false,
                        disabled: false,
                        href: "javascript:;"
                      },
                      onConfirm: () => {
                        sendSmsCode({
                          tel: tel,
                          module: config.module.UTILS
                        }).then(res => {
                          if(res.meta.success) {
                            show('发送成功')
                          } else show(res.meta.message);
                        });
                      }
                    }).show();
                  }
                }
              },
              {
                type: "input",
                modelKey: "code",
                label: "验证码",
                props: {
                  placeholder: "请输入验证码",
                  clearable: true
                },
                rules: {
                  required: true,
                  len: 4,
                  type: "number"
                },
                messages: {
                  required: "验证码不能为空"
                }
              }
            ]
          }
        ]
      }
    };
  },
  methods: {
    validateHandler(result) {
      this.validity = result.validity;
      this.valid = result.valid;
    },
    submitHandler(e) {
      if (!this.form.serviceChecked) {
        show("请勾选协议和免责条款");
        return;
      }

      login(this.form)
        .then(res => {
          if(res.meta.success) {
            show('登陆成功')
            this.saveToken(res.data)
            this.$router.replace('/users/center');
          } else show(res.meta.message)
        });
    },
    input(value) {
      this.form.serviceChecked = value;
    },
    submit() {
      this.$refs.form.submit();
    },
    ...mapMutations(["saveToken"])
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

/ >>> .cube-form-item_required .cube-form-label::before {
  content: '';
}

/ >>> .cube-input_active::after {
  border-color: $colorPrimary;
}

/ >>> .cube-checkbox_checked .cube-checkbox-ui i {
  color: $colorPrimary;
}
</style>
